<template>
  <div id="app">
    <!--头部导航栏 START-->
    <milk-header></milk-header>
    <!--头部导航栏 END-->

    <!--左边的导航栏 START-->
    <left-nav :user-count="userCount"></left-nav>
    <!--左边的导航栏 END-->

    <!--右侧的展示区域 START-->
    <div class="body-container">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <!--右侧的展示区域 END-->
  </div>
</template>

<script>
import LeftNav from './components/nav/LeftNav'
import MilkHeader from './components/milk-header/MilkHeader'
import util from "@/libs/util";

export default {
  components: { LeftNav, MilkHeader },
  data () {
    return {
      user: null,
      userCount: 0,
      socket: null
    }
  },
  created () {
    let user = localStorage.getItem('daisy_guest')
    if (user) {
      this.user = JSON.parse(user)
    } else {
      this.user = {
        id: util.guid(),
        name: randomAnimal(),
        head: ''
      }
      localStorage.setItem('daisy_guest', JSON.stringify(this.user))
    }
  },
  mounted () {
    setTimeout(() => {
      document.getElementById('preloader').classList.add('hiddenLoading')
      document.getElementById('preloader').classList.add('hiddenLoading')
      setTimeout(() => {
        document.getElementById('preloader').style.display = 'none'
      }, 600)
    }, 800)
    this.initSocket()
  },
  methods: {
    initSocket () {
      // 连接socket
      // this.socket = io('http://daisy-api.icu', { path: '/room/1' })
      let pre = process.env.NODE_ENV === 'production' ? '/ws/' : '/'
      this.socket = io(process.env.VUE_APP_WS_BASE_URL, { path: pre + 'supervise' })
      this.$store.commit('daisy/blog/InitSocket', { socket: this.socket })
      this.socket.on('connect', () => {
        // 1.发送当前用户信息给服务端
        this.socket.emit('userConnect', this.user)

        // 2.接收服务端返回的用户列表
        this.socket.on('onlineUser', (user) => {
          this.userCount = user
        })

        // 处理socket断开
        this.socket.on('disconnect', (err) => {
          console.log('disconnect', err)
        })

        // 处理socket接收到的消息
        this.handleReceiveMessage()
      })
    },

    // 处理接受到的服务端消息
    handleReceiveMessage () {
      // 处理普通消息
      this.socket.on('serverMsg', (msg) => {
        console.log(msg)
      })

      // 处理系统消息
      // 1.用户上线
      this.socket.on('oneUserIn', (user) => {
        this.userCount = user
      })
      // 2.用户下线
      this.socket.on('oneUserOut', (user) => {
        this.userCount = user
      })
    },
  }
}
</script>
<style src="./assets/css/normallize.css"></style>
<style src="./assets/css/daisy-public.css"></style>
<style src="./assets/css/fonts.css"></style>
<style src="./assets/iconfont/iconfont.css"></style>
<style>
/*App.vue*/
html, body, div, span, input, li, ul {
  box-sizing: border-box;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

#app {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.body-container {
  position: relative;
  flex: 1;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/*1200px 以上 plug-container 在右边*/
@media (min-width: 1200px) {
  .article-container {
    width: 66.66%;
  }
}

/*992px以内，nav-container消失*/
@media (max-width: 992px) {
  #app {
    padding-top: 55px;
  }

  .article-container {
    padding: 14px 24px !important;
  }
}

</style>
